<template>
  <view class="box">
    <!-- 获取收货地址 -->
    <button v-if="!addressInfo" @click="getAddress" type="primary" plain>获取收货地址</button>
    <!-- 地址信息 -->
    <view class="address" v-if="addressInfo">
      <view class="userInfo">
        <view>{{addressInfo.userName}}</view>
        <view>{{addressInfo.telNumber}}</view>
      </view>
      <view>
        {{addressInfo.provinceName}}
        {{addressInfo.cityName}}
        {{addressInfo.countyName}}
        {{addressInfo.detailInfo}}
      </view>
    </view>
    <!-- 购物车为空时 -->
    <view v-if="!cartList.length" class="content">
      <view class="title">你还没有添加任何商品</view>
      <image
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597156288896&di=3f4a1997ab88758aeb8063dbd981cc80&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658"
        mode="aspectFit"
      />
    </view>
    <uni-swipe-action v-for="(item,index) in cartList" :key="item.goods_id">
      <uni-swipe-action-item :right-options="options" @click="onClick(index)">
        <view class="item">
          <checkbox-group @change="changeCheckBox(index)">
            <checkbox :checked="item.checked" />
          </checkbox-group>
          <image :src="item.pics[0].pics_big" />
          <view class="item_info">
            <view class="info_name">{{item.goods_name}}</view>
            <view class="item_price">
              <view class="price">￥{{item.goods_price}}</view>
              <view class="changNum">
                <view class="sub" @click="sub(index)">-</view>
                <text>{{item.count}}</text>
                <view class="add" @click="add(index)">+</view>
              </view>
            </view>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 底部 -->
    <view class="floor" v-if="cartList.length">
      <view class="left">
        <label class="checkbox">
          <checkbox-group @click="changeAllCheckBox">
            <checkbox :checked="checkedBox" />全选
          </checkbox-group>
        </label>
        <view class="total">
          <view>
            合计：
            <text>￥{{allPrice}}</text>
          </view>
          <view>包含运费</view>
        </view>
      </view>
      <view class="right">
        <view @click="payTo" class="navigator">
          <view>结算({{length}})</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uniSwipeAction, uniSwipeActionItem } from '@dcloudio/uni-ui'
export default {
  components: { uniSwipeAction, uniSwipeActionItem },
  data() {
    return {
      address: [],
      addressInfo: null,
      checkedBox: true,
      cartList: [],
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#fd2d48',
          },
        },
      ],
    }
  },
  onLoad() {
    console.log('粗发了')
    this.addressInfo = uni.getStorageSync('address') || null
  },
  onShow() {
    this.getCartList()
    this.getcheckedBox()
  },
  methods: {
    onClick(i) {
      uni
        .showModal({
          title: '删除商品', // 标题
          content: '真的要删除吗？', // 内容
          showCancel: true, // 可以不要
        })
        .then((res) => {
          console.log(res)
          if (res[1].confirm) {
            this.cartList.splice(i, 1)
          }
        })
    },
    getAddress() {
      uni.chooseAddress().then((res) => {
        console.log(res[1])
        this.addressInfo = res[1]
        uni.setStorageSync('address', this.addressInfo)
      })
    },
    getCartList() {
      this.cartList = uni.getStorageSync('cart')
    },
    changeCheckBox(i) {
      this.cartList[i].checked = !this.cartList[i].checked

      uni.setStorageSync('cart', this.cartList)
      if (this.cartList.length) {
        this.checkedBox = this.cartList.every((x) => x.checked)
      }
    },
    sub(i) {
      if (this.cartList[i].count > 1) {
        this.cartList[i].count--
      } else if (this.cartList[i].count == 1) {
        uni
          .showModal({
            title: '删除商品', // 标题
            content: '真的要删除吗？', // 内容
            showCancel: true, // 可以不要
          })
          .then((res) => {
            console.log(res)
            if (res[1].confirm) {
              this.cartList.splice(i, 1)
            }
          })
      }
    },
    add(i) {
      this.cartList[i].count++
    },
    changeAllCheckBox() {
      this.checkedBox = !this.checkedBox
      console.log(this.checkedBox)
      this.cartList.forEach((x) => {
        x.checked = this.checkedBox
      })
    },
    getcheckedBox() {
      if (this.cartList.length) {
        this.checkedBox = this.cartList.every((x) => x.checked)
      } else {
        this.checkedBox = false
      }
    },
    payTo(){
      // 有商品被选中
      const length = this.cartList.filter(x=>x.checked).length
      console.log(length)
      length|| uni.showToast({
        title:'还没有选中商品',
        icon:'none'
      })
      this.addressInfo||uni.showToast({
        title:'还没有选择收货地址',
        icon:'none'
      })
      if(length&&this.addressInfo){
        uni.navigateTo({
           url: '/pages/orders/index'
        })
      }

    }
  },
  watch: {
    cartList: {
      handler() {
        console.log(111)
        uni.setStorageSync('cart', this.cartList)
      },
      deep: true,
    },
  },
  computed: {
    allPrice() {
      let sum = 0
      if (this.cartList.length) {
        this.cartList.forEach((x) => {
          if (x.checked) {
            sum += x.goods_price * x.count
          }
        })
      }
      return sum
    },
    length() {
      if (!this.cartList) {
        return 0
      }
      return this.cartList.filter((x) => x.checked).length
    },
  },
}
</script>

<style lang="scss">
.content {
  .title {
    font-size: 40rpx;
    margin-top: 30rpx;
  }
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100rpx;
  //  border-bottom: 2rpx solid $theme-color;
  button {
    height: 100rpx;
    width: 60%;
    margin: 40rpx 0;
    font-size: 36rpx;
  }
  .address {
    width: 100%;
    padding: 20rpx;
    border-bottom: 2rpx solid $theme-color;
    .userInfo {
      display: flex;
      justify-content: space-between;
    }
  }
}
.floor {
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  // background: orange;
  width: 100%;
  border-top: 2rpx solid #ddd;
  display: flex;
  .left {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    label {
      display: flex;
      align-items: center;
    }
    .total {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text {
        font-weight: 600;
        color: $theme-color;
        font-size: 36rpx;
      }
    }
  }
  .right {
    width: 240rpx;
    .navigator {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      background: $theme-color;
      view {
        font-size: 32rpx;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}
.item {
  display: flex;
  width: 100%;
  padding: 20rpx;
  border-bottom: 1px solid #ddd;
  // align-items: center;
  checkbox-group {
    width: 80rpx;
    display: flex;
    align-items: center;
  }
  image {
    width: 150rpx;
    height: 150rpx;
    flex-shrink: 0;
    margin: 0 20rpx;
  }
  .item_info {
    flex: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // height:100%;
    .info_name {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 24rpx;
    }
    .item_price {
      display: flex;
      justify-content: space-between;
      .price {
        color: $theme-color;
        font-size: 38rpx;
      }
      .changNum {
        display: flex;
        line-height: 50rpx;
        view {
          width: 50rpx;
          height: 50rpx;
          border: 1px solid #ddd;
          text-align: center;
        }
        text {
          padding: 0 20rpx;
        }
      }
    }
  }
}
/*复选框外框样式*/
checkbox .wx-checkbox-input {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
}
/*复选框外框选中样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border-color: $theme-color;
}
/*复选框选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 60%;
  height: 60%;
  background: $theme-color;
  border-radius: 100%;
  content: '';
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
</style>
